<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>大订单调度</title>
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/element-ui/lib/theme-chalk/index.css"
    />
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant_2.12.54.css"
    />

    <style>
      .el-select-dinwei .el-select-dropdown {
        left: -40% !important;
      }
      .search-bar {
        display: flex;
        padding: 10px;
        position: sticky;
        top: 0px;
        background: #fff;
        z-index: 999;
      }
      .action-container {
        padding: 10px;
        position: sticky;
        bottom: 0px;
        background: #fff;
        z-index: 999;
      }
      .u-flex {
        display: flex;
      }
      .u-row-around {
        justify-content: space-around;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        width: 100%;
      }

      #app {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="u-p-t-15">
        <div class="search-bar d-flex u-m-b-10 u-col-center isHeader">
          <span
            class="u-m-l-20"
            style="align-items: center; display: flex; margin-right: auto"
          >
            <template v-if="mode === 'add'">
              <el-tag class="u-m-t-2" size="mini" type="success"
                >大订单调度-新增</el-tag
              >
            </template>
            <template v-if="mode === 'edit'">
              <el-tag class="u-m-t-2" size="mini">大订单调度-编辑</el-tag>
            </template>
            <template v-if="mode === 'details'">
              <el-tag class="u-m-t-2" size="mini" type="info"
                >大订单调度-详情</el-tag
              >
            </template>
          </span>
        </div>
        <div ref="formHeight" class="print-container">
          <el-form
            size="small"
            label-width="8em"
            label-position="right"
            style="padding: 5px 25px 0 5px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="计划日期" required>
                  <el-date-picker
                    v-model="formData.jihuariqi"
                    :disabled="isFormDataDisabled"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="计划日期"
                    :style="{ width: '100%' }"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="所属组织" required>
                  <el-select
                    v-model="formData.Company_Code"
                    placeholder="所属组织"
                    :style="{ width: '100%' }"
                    filterable
                    :disabled="isFormDataDisabled"
                  >
                    <el-option
                      v-for="item in formOptions.CompanyCodeOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="车队" required>
                  <el-select
                    class="el-select-dinwei"
                    v-model="formData.SDAN8"
                    :popper-append-to-body="false"
                    placeholder="车队"
                    :style="{ width: '100%' }"
                    filterable
                    :disabled="isFormDataDisabled"
                  >
                    <el-option
                      v-for="item in formOptions.kehujianchengOptiopns"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="车牌号" required>
                  <div style="display: flex">
                    <el-select
                      v-model="formData.baozhuang"
                      placeholder="车牌号"
                      :disabled="isFormDataDisabled"
                      :style="{ width: '100%' }"
                      filterable
                    >
                      <el-option
                        v-for="item in formOptions.baozhuangOptions"
                        :key="item.ID"
                        :label="item.Name"
                        :value="item.ID"
                      ></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="挂车号">
                  <el-select
                    v-model="formData.suoxuchexing"
                    placeholder="挂车号"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.suoxuchexingOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="司机一">
                  <el-select
                    v-model="formData.sijiyi1"
                    placeholder="司机一"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.sijiyiOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="司机二">
                  <el-select
                    v-model="formData.sijiyi2"
                    placeholder="司机二"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.sijiyiOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="押运员">
                  <el-select
                    v-model="formData.yayunyuan"
                    placeholder="押运员"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.sijiyiOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="要求装货时间" required>
                  <el-date-picker
                    v-model="formData.SouRDT"
                    :disabled="isFormDataDisabled"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="要求装货时间"
                    :style="{ width: '100%' }"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="要求卸货时间" required>
                  <el-date-picker
                    v-model="formData.SDTRDT"
                    :disabled="isFormDataDisabled"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="要求卸货时间"
                    :style="{ width: '100%' }"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="订单数量" required>
                  <div style="display: flex">
                    <el-input-number
                      v-model="formData.SDUORG"
                      :disabled="isFormDataDisabled"
                      controls-position="right"
                      :style="{ width: '50%' }"
                      :controls="false"
                      class="inputNumAlign_left"
                      placeholder="订单数量"
                    >
                    </el-input-number>
                    <el-select
                      v-model="formData.SDUOM"
                      placeholder="单位"
                      :disabled="isFormDataDisabled"
                      :style="{ width: '50%' }"
                      filterable
                    >
                      <el-option
                        v-for="item in formOptions.danweiOptions"
                        :key="item.ID"
                        :label="item.Name"
                        :value="item.ID"
                      ></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="出车点">
                  <el-select
                    v-model="formData.chuachedian"
                    placeholder="出车点"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.chuachedianOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="装货地点" required>
                  <el-select
                    v-model="formData.SouAddCode"
                    placeholder="装货地点"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.shenqingrenOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="卸货地点" required>
                  <el-select
                    v-model="formData.SDPA8"
                    placeholder="卸货地点"
                    :style="{ width: '100%' }"
                    :disabled="isFormDataDisabled"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.xiehuojianchengOptiopns"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="回场点">
                  <el-select
                    v-model="formData.huichangdian"
                    placeholder="回场点"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.huichangdianOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="产品" required>
                  <el-select
                    v-model="formData.SDLITM"
                    placeholder="产品"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.jiayoukaOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="门岗">
                  <el-select
                    v-model="formData.mengang"
                    placeholder="门岗"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.mengangOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="出车备注">
                  <el-input
                    v-model="formData.SouRemark"
                    :disabled="isFormDataDisabled"
                    placeholder="出车备注"
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="外发单价">
                  <div style="display: flex">
                    <el-input-number
                      v-model="formData.SDUPRC"
                      :disabled="isFormDataDisabled"
                      controls-position="right"
                      :style="{ width: '50%' }"
                      :controls="false"
                      class="inputNumAlign_left"
                      placeholder="外发单价"
                    >
                    </el-input-number>
                    <el-select
                      v-model="formData.waifazhonliang"
                      placeholder="单位"
                      :disabled="isFormDataDisabled"
                      :style="{ width: '50%' }"
                      filterable
                    >
                      <el-option
                        v-for="item in formOptions.waifazhonliangOptions"
                        :key="item.ID"
                        :label="item.Name"
                        :value="item.ID"
                      ></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="复制张数">
                  <el-input-number
                    v-model="formData.SDAEXP"
                    :disabled="isFormDataDisabled"
                    :controls="false"
                    class="inputNumAlign_left"
                    placeholder="复制张数"
                    controls-position="right"
                    :style="{ width: '100%' }"
                  >
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="action-container u-flex u-row-around">
          <el-button type="info" plain size="mini" @click="close"
            >关闭</el-button
          >
          <template
            v-if="
                mode !== 'dateils'
            "
          >
            <el-button
              type="primary"
              :loading="isLoadingBtn"
              size="mini"
              @click="submit"
              >提交</el-button
            >
          </template>
        </div>
      </div>
    </div>
    <script src="https://wxapp.jsadf.com/vendor/vue2.prod.bundle.js"></script>
    <script src="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/element-ui/lib/index.js"></script>

    <script>
      let baseUrl = "https://www.51yunmai.com";
      /**
       * 转换URL参数
       */
      function queryToObject() {
        const res = {};
        const search = location.search.substr(1); // 返回类似于 a=10&b=20&c=30
        const paramArr = search.split("&");
        paramArr.forEach(function (item) {
          const itemArr = item.split("=");
          const key = itemArr[0];
          const value = itemArr[1];
          res[key] = value;
        });
        return res;
      }
      Vue.use(ELEMENT);
      let nuteidm = (i, id, name) => {
        return {
          ID: i[id],
          Name: i[name],
          ...i,
        };
      };

      new Vue({
        el: "#app",
        data() {
          return {
            mode: "",
            queryOptionMap: {
              kehujianchengOptiopnMap: {},
              templateNamedaoruOptiopnsMap: {},
            },
            formData: {
              jihuariqi: undefined,
              Company_Code: undefined,
              SDAN8: undefined,
              SDAN8T: undefined,
              SouAddCode: undefined,
              SouAddName: undefined,
              SDPA8: undefined,
              SDPA8T: undefined,
              SDLITM: undefined,
              SDUORG: undefined,
              SDUOM: undefined,
              baozhuang: undefined,
              suoxuchexing: undefined,
              sijiyi1: undefined,
              sijiyi2: undefined,
              yayunyuan: undefined,
              SDUPRC: undefined,
              waifazhonliang: undefined,
              SDAEXP: undefined,
              SouRemark: undefined,
              SouRDT: undefined,
              SDTRDT: undefined,
              chuachedian: undefined,
              huichangdian: undefined,
              mengang: undefined,
            },

            formOptions: {
              mengangOptions: [],
              CompanyCodeOptions: [],
              huichangdianOptions: [],
              waifazhonliangOptions: [],
              danweiOptions: [],
              chuachedianOptions: [],
              baozhuangOptions: [],
              suoxuchexingOptions: [],
              sijiyiOptions: [],
              kehujianchengOptiopns: [],
              templateNamedaoruOptiopns: [],
              shenqingrenOptions: [],
              xiehuojianchengOptiopns: [],
              chufadiOptions: [],
              lichenleifOptions: [],
              jifeifjOptions: [],
              jiayoukaOptions: [],
              yewuleixingOptions: [],
            },
            // 是否禁用表单输入
            isFormDataDisabled: false,
            // 提交loading
            isLoadingBtn: false,
          };
        },
        computed: {
          isdevUrl() {
            let url = location.href;
            return url.indexOf("http://127.0.0.1:5500") !== -1;
          },
        },
        methods: {
          close() {
            if (this.isdevUrl) {
              location.href = `http://127.0.0.1:5500/dadingdan/dadingdan.html`;
            } else {
              // 处理其他环境或默认行为
            }
          },
          async submit() {
            // let f = this.formData;
            // const res = await axios.post("/WeiXinOrder/Add", f, {
            //   headers: {
            //     "Content-Type": "application/x-www-form-urlencoded",
            //   },
            // });
            // if (res.data.state === 200) {
            //   this.$message({
            //     message: "添加成功",
            //     type: "success",
            //   });
            //   // this.close();
            // } else {
            //   this.$message({
            //     message: res.data.Message,
            //     type: "error",
            //   });
            // }
          },
          async getCustomerC() {},
        },

        async created() {
          this.getCustomerC(); //获取下拉
          let query = queryToObject();
          this.mode = query.mode;
        },
      });
    </script>
  </body>
</html>
